<template>
    <div class="accountLogin">
      <div class="title"></div>
      <div class="routeBar">
        <RouterLink to="/login/account" class="account"
        :class="{ active: isAccountActive }">
          账号密码登录
        </RouterLink>
        <div class="seperator">|</div>
        <RouterLink to="/login/vertification" class="vertificate"
        :class="{ active: isVertificationActive }">
          验证码登录
        </RouterLink>
      </div>
      <div class="content">
        <RouterView></RouterView>
      </div>
    </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router';
const route = useRoute();
const isAccountActive = computed(() => route.path === '/login/account');
const isVertificationActive = computed(() => route.path === '/login/vertification');
</script>

<style scoped lang="less">
@import url('@/views/login/accoutView/index.less');
</style>